<template>
  <div class="screen-container" :style='containerStyle'>
    <header class="screen-header">
      <div>
        <img :src="headerSrc" alt="">
      </div>
      <span class="logo">
        数据可视化<!-- <img src="../../public/static/img/logo.jpg" alt="" /> -->
      </span>
      <span class="title">电商平台数据实时监控系统</span>
      <div class="title-right">
        <img :src="themeSrc" class="qiehuan" @click="handleChangeTheme">
        <span class="datetime" id='showTime'>{{nowTime}}</span>
      </div>
    </header>
    <div class="screen-body">
      <section class="screen-left">
        <div id="left-top" :class="[this.fullScreenStatus.trend?'fullscreen':'']">
          <!-- 销量趋势图表 -->  
					<trend ref="trend"></trend>
					<div class="resize">
					  <!-- icon-compress-alt -->
					  <span @click="changeSize('trend')" :class="['iconfont',this.fullScreenStatus.trend?'icon-compress-alt':'icon-expand-alt']"></span>
					</div>
        </div>
        <div id="left-bottom" :class="[this.fullScreenStatus.seller?'fullscreen':'']">
          <!-- 商家销售金额图表 -->
					<seller ref="seller"></seller>
					<div class="resize">
					  <!-- icon-compress-alt -->
					  <span @click="changeSize('seller')" :class="['iconfont',this.fullScreenStatus.seller?'icon-compress-alt':'icon-expand-alt']"></span>
					</div>
        </div>
      </section>
      <section class="screen-middle">
        <div id="middle-top" :class="[this.fullScreenStatus.map?'fullscreen':'']">
          <!-- 商家分布图表 -->
					<Map ref="map"></Map>
					<div class="resize">
					  <!-- icon-compress-alt -->
					  <span @click="changeSize('map')" :class="['iconfont',this.fullScreenStatus.map?'icon-compress-alt':'icon-expand-alt']"></span>
					</div>
        </div>
        <div id="middle-bottom" :class="[this.fullScreenStatus.rank?'fullscreen':'']">
          <!-- 地区销量排行图表 -->
					<rank ref="rank"></rank>
					<div class="resize">
					  <!-- icon-compress-alt -->
					  <span @click="changeSize('rank')" :class="['iconfont',this.fullScreenStatus.rank?'icon-compress-alt':'icon-expand-alt']"></span>
					</div>
        </div>
      </section>
      <section class="screen-right">
        <div id="right-top" :class="[this.fullScreenStatus.hot?'fullscreen':'']">
          <!-- 热销商品占比图表 -->
					<hot ref="hot"></hot>
					<div class="resize">
					  <!-- icon-compress-alt -->
					  <span @click="changeSize('hot')" :class="['iconfont',this.fullScreenStatus.hot?'icon-compress-alt':'icon-expand-alt']"></span>
					</div>
        </div>
        <div id="right-bottom" :class="[this.fullScreenStatus.stock?'fullscreen':'']">
          <!-- 库存销量分析图表 -->
					<stock ref="stock"></stock>
					<div class="resize">
					  <!-- icon-compress-alt -->
					  <span @click="changeSize('stock')" :class="['iconfont',this.fullScreenStatus.stock?'icon-compress-alt':'icon-expand-alt']"></span>
					</div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import Hot from '@/components/Hot.vue'
import Map from '@/components/Map.vue'
import Rank from '@/components/Rank.vue'
import Seller from '@/components/Seller.vue'
import Stock from '@/components/Stock.vue'
import Trend from '@/components/Trend.vue'
//import { mapState } from 'vuex'
import { getThemeValue } from '@/utils/theme_utils.js'
export default {
  created () {
    //注册接收到数据的回调函数
   this.$socket.registerCallBack('fullScreen', this.recvData);
   this.$socket.registerCallBack('themeChange', this.recvThemeChange)
  },
  destroyed () {
   this.$socket.unRegisterCallBack('fullScreen');
   this.$socket.unRegisterCallBack('themeChange');
	 clearInterval(this.timeId);
  },
	mounted() {
		this.getDate();
		this.currentTime();
	},
  data () {
    return {
      //定义每一个图表的全屏状态
      fullScreenStatus: {
        trend: false,
        seller: false,
        map: false,
        rank: false,
        hot: false,
        stock: false
      },
			nowTime:'',
			timeId:null
    }
  },
	computed: {
		theme(){
			return this.$store.state.theme;
		},
	  // logoSrc () {
	  //   return '/static/img/' + getThemeValue(this.theme).logoSrc
	  // },
	  headerSrc () {
	    return '/static/img/' + getThemeValue(this.theme).headerBorderSrc
	  },
	  themeSrc () {
	    return '/static/img/' + getThemeValue(this.theme).themeSrc
	  },
	  containerStyle () {
	    return {
	      backgroundColor: getThemeValue(this.theme).backgroundColor,
	      color: getThemeValue(this.theme).titleColor
	    }
	 },
	},
  methods: {
    changeSize (chartName) {
      // //1.改变fullScreenStatus的数据
      // this.fullScreenStatus[chartName] = !this.fullScreenStatus[chartName];
      // //2.需要调用每一个图表组件的screenAdapter的方法
      // this.$nextTick(() => {
      //   this.$refs[chartName].screenAdapter();
      // })
      //将数据发送给服务端
      const targetValue = !this.fullScreenStatus[chartName]
      this.$socket.send({
        action: 'fullScreen',
        socketType: 'fullScreen',
        chartName: chartName,
        value: targetValue
      })
    },
    // 接收到全屏数据之后的处理
    recvData (data) {
      //取出是哪一个图表需要进行切换
     const chartName = data.chartName;
      //取出, 切换成什么状态
      const targetValue = data.value;
      this.fullScreenStatus[chartName] = targetValue;
      this.$nextTick(() => {
        this.$refs[chartName].screenAdapter();
      })
    },
    handleChangeTheme () {
      //修改VueX中数据
      //this.$store.commit('changeTheme');
      this.$socket.send({
        action: 'themeChange',
        socketType: 'themeChange',
        chartName: '',
        value: ''
      })
    },
    recvThemeChange () {
     this.$store.commit('changeTheme')
    },
		nowtime(){
			const t = setTimeout(time, 1000); //设定定时器，循环运行 
			
		},
		getDate(){
			 const dt = new Date();
			 const y = dt.getFullYear();
			 const mt = dt.getMonth() + 1;
			 const day = dt.getDate();
			 let h = dt.getHours(); //获取时
			   h = h < 10 ? "0" + h : h;
			 let m = dt.getMinutes(); //获取分
			   m = m < 10 ? "0" + m : m;
			 let s = dt.getSeconds(); //获取秒
			   s = s < 10 ? "0" + s : s;
				this.nowTime = '当前时间：' + y + "年" + mt + "月" + day + '日' + "-" + h + "时" + m + "分" +
					s + "秒";
		},
		currentTime(){
			// this.getData();
			this.timeId =setInterval(this.getDate,1000);
			}
  },
  components: {
    Hot,
    Map,
    Rank,
    Seller,
    Stock,
    Trend
  }
}
</script>
<style lang="less" scoped>
// 全屏样式的定义
.fullscreen {
  position: fixed!important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  z-index: 100;
}

.screen-container {
  width: 100%;
  height: 100%;
  padding: 0 20px;
  background-color: #161522;
  color: #fff;
  box-sizing: border-box;
}
.screen-header {
	
  width: 100%;
  height: 64px;
  font-size: 20px;
  position: relative;
  > div {
      img {
        width: 100%;
      }
    }
  .title {		
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 20px;
    transform: translate(-50%, -50%);
  }
  .title-right {	
    display: flex;
    align-items: center;
    position:absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-80%);
  }
  .qiehuan {		
    width: 28px;
    height: 21px;
    cursor: pointer;
  }
  .datetime {
    font-size: 15px;
    margin-left: 10px;
  }
  .logo {
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-80%);
    img {
      height: 35px;
      width: 128px;
    }
  }
}
.screen-body {
  width: 100%;
  height: 100%;
  display: flex;
  margin-top: 30px;
  .screen-left {
    height: 100%;
    width: 27.6%;
    #left-top {
      height: 53%;
      position: relative;
    }
    #left-bottom {
//			border:1px solid red;
      height: 31%;
      margin-top: 25px;
      position: relative;
    }
  }
  .screen-middle {
//		border:1px solid red;
    height: 100%;
    width: 41.5%;
    margin-left: 1.6%;
    margin-right: 1.6%;
    #middle-top {
//			border:1px solid red;
      width: 100%;
      height: 56%;
      position: relative;
    }
    #middle-bottom {
//			border:1px solid red;
      margin-top: 25px;
      width: 100%;
      height: 28%;
      position: relative;
    }
  }
  .screen-right {
	//	border:1px solid red;
    height: 100%;
    width: 27.6%;
    #right-top {
	//		border:1px solid red;
      height: 46%;
      position: relative;
    }
    #right-bottom {
	//		border:1px solid red;
      height: 38%;
      margin-top: 25px;
      position: relative;
    }
  }
}
.resize {
//	border:1px solid red;
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
}
</style>
